import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback } from "react-native";
import {statusBarHeight,width} from '../util/apdater_util';
import PropTypes from 'prop-types';
import img_arr from "../util/img_arr";

class CustomerHeader extends React.Component{
  constructor(props) {
    super(props);
    this._root=null;
    this._backComponent=null
    this.state={

    }
  }
  setNativeProps = (nativeProps) => {
    this._root.setNativeProps(nativeProps);
  }
  setNativeBackProps = (nativeProps) => {

  }
  // 属性申明
  static propTypes = {
    title:PropTypes.string,
    canBack:PropTypes.bool,
    leftImageView: PropTypes.any, // 左边图片
    middleTxtStyle: PropTypes.any, // 中间文字,
    bgStyle: PropTypes.any, // 背景
    showLine: PropTypes.bool, // 底部线
  }

  // 默认
  static defaultProps = {
    title:'',
    canBack:true,
    leftImageView: img_arr.icon_back_black,
    middleTxtStyle: {color: '#000000', fontSize: 20},
    bgStyle: {color: '#fff'},
    showLine: false,
  }

  render() {
    return (
      <View ref={component => this._root = component} style={[this.props.style,styles.wrapper]}>
        <View  style={[styles.container]}>
          <View style={{flex:1}}>
            {this.props.canBack?<TouchableWithoutFeedback onPress={this.props.leftOnPress}>
              <View style={styles.back}>
                <Image ref={backComponent => this._backComponent = backComponent} style={styles.backIcon} source={this.props.leftImageView}></Image>
              </View>
            </TouchableWithoutFeedback>:null}
          </View>
          <Text style={[styles.titleStyle,this.props.middleTxtStyle]}>{this.props.title}</Text>
          <View style={styles.rightBarItem}>
            {this.props.children}
          </View>
        </View>
        {this.props.showLine? <View style={styles.bottomLine}></View>: null}
      </View>
    )
  }
}

export default module=CustomerHeader;

const styles=StyleSheet.create({
  wrapper:{
    backgroundColor:'rgba(255,255,255,0)',
    height:statusBarHeight+44,
    paddingTop:statusBarHeight,
  },
  container:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center'
  },
  back:{
    width:40,
    height: 40,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  backIcon:{
    width:8,
    height:15
  },
  titleStyle:{
    fontSize: 19,
    fontWeight:'500',
    color:'#000000',
    flex:2,
    textAlign:'center'
  },
  rightBarItem:{
    flex:1,
    height:40,
    flexDirection:'row',
    justifyContent:'flex-end',
    alignItems:'center'
  },
  bottomLine:{
    position:'absolute',
    left:0,
    right:0,
    bottom:0,
    height: 1,
    backgroundColor: '#F6F6F6'
  }
})
